<template>
  <div class="ditu">
    <div id="r-result">
      请输入:<input
        type="text"
        id="suggestId"
        size="20"
        value="百度"
        style="width: 150px"
      />
    </div>
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>
    <!--百度地图容器-->
    <div
      style="
        width: 100%;
        height: 680px;
        border: #ccc solid 1px;
        font-size: 12px;
      "
      id="map"
    ></div>
  </div>
</template>
<script>
export default {
  mounted() {
    //创建和初始化地图函数：
    function initMap() {
      createMap(); //创建地图
      setMapEvent(); //设置地图事件
      addMapControl(); //向地图添加控件
      addMapOverlay(); //向地图添加覆盖物
    }
    function createMap() {
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(114.385934, 30.512719), 19);
    }
    function setMapEvent() {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    }
    function addClickHandler(target, window) {
      target.addEventListener("click", function () {
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay() {
      var markers = [
        {
          content: "嘿嘿嘿",
          title: "五环天地",
          imageOffset: { width: 0, height: 3 },
          position: { lat: 30.512991, lng: 114.385624 },
        },
      ];
      for (var index = 0; index < markers.length; index++) {
        var point = new BMap.Point(
          markers[index].position.lng,
          markers[index].position.lat
        );
        var marker = new BMap.Marker(point, {
          icon: new BMap.Icon(
            "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
            new BMap.Size(20, 25),
            {
              imageOffset: new BMap.Size(
                markers[index].imageOffset.width,
                markers[index].imageOffset.height
              ),
            }
          ),
        });
        var label = new BMap.Label(markers[index].title, {
          offset: new BMap.Size(25, 5),
        });
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false,
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
        marker.setLabel(label);
        addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
      }
    }
    //向地图添加控件
    function addMapControl() {
      var scaleControl = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      });
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: true,
      });
      map.addControl(overviewControl);
    }
    var map;
    initMap();

    //   搜索
  },
};
</script>